<template>
  <div class="yes_add_con">
      <h3 class="title">昨日新增分布</h3>
      <div class="border"></div>
      <div class="yes_add_box" ref="yes_add"></div>

  </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    mounted(){
        this.initBar()
    },
    methods:{
        initBar(){
            let barEchart=this.$echarts.init(this.$refs.yes_add);
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    top:'2%',
                    right:'1%',
                    data: [ '本土新增'],
                    textStyle:{
                        color:'#24C2FF',
                        fontSize:12,
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['南京','扬州',  '宿迁', '淮安', '盐城',],
                    axisLabel: { 
                        color:'#24C2FF'
                    },
                    axisTick:{
                        show:false
                    },
                    axisLine:{
                        lineStyle:{
                             color:'#24C2FF'
                        }
                    },

                },
                
                yAxis: {
                    name:'数量(单位:人)',
                    nameTextStyle:{
                       color:'#24C2FF',
                       padding:[20,20,20,50]
                    },
                    type: 'value',
                    axisLabel: { 
                        color:'#24C2FF'
                    },
                    splitLine: {
                        show:true,
                        lineStyle:{
                             color:'#24C2FF'
                        }
                       
                    },
                    
                },
                series: [
                    {
                        name: '新增',
                        type: 'bar',
                        stack: 'total',
                        data: [2,48, 0, 0, 0],
                        barWidth:30
                    }
                ]
            };
            barEchart.setOption(option);

        } 
    }

}
</script>

<style lang="less" scoped>
    .yes_add_con{
        width: 100%;
        height: 420px;
        background: linear-gradient(180deg,rgba(36,194,255,0.10), rgba(36,194,255,0.00));
        border: 3px solid #24c2ff;
        .title{
            color: #24c2ff;
            font-size: 16px;
            padding: 15px 0 15px 18px;
            font-weight: 500;
        }
        .border{
            width: 100%;
            height: 1px;
            background: #04130f;
        }
        .yes_add_box{
            width: 583px;
            height: 360px;
        }

    }
</style>